<!DOCTYPE html>
<html>
<head>
    <title>Remote binding</title>
    <meta charset="utf-8">
    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example" class="k-content">
    <div id="form-container">
        <div class="demo-section">
            Select Product: <select data-role="dropdownlist" data-option-label="Select product"
                             data-value-field="ProductID" data-text-field="ProductName"
                             data-bind="source: productsSource, value: selectedProduct"></select>

            <button data-bind="click: save, enabled: hasChanges" class="k-button">Submit All Changes</button>
        </div>
        <div class="demo-section product-info" data-bind="visible: showForm">
            <ul>
                <li><label>ID</label> <span data-bind="text:selectedProduct.ProductID, events: { change: change }"></span></li>
                <li><label>Name</label> <input type="text" class="k-textbox" id="products" data-bind="value: selectedProduct.ProductName, events: { change: change }" /></li>
                <li><label>UnitPrice</label> <input type="text" data-role="numerictextbox" data-bind="value: selectedProduct.UnitPrice, events: { change: change }" /></li>
            </ul>

            <button data-bind="click: remove" class="k-button">Delete Product</button>

        </div>
    </div>
    <script>
        var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service";

        $(document).ready(function() {
            var viewModel = kendo.observable({
                productsSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: crudServiceBaseUrl + "/Products",
                            dataType: "jsonp"
                        },
                        update: {
                            url: crudServiceBaseUrl + "/Products/Update",
                            dataType: "jsonp"
                        },
                        destroy: {
                            url: crudServiceBaseUrl + "/Products/Destroy",
                            dataType: "jsonp"
                        },
                        parameterMap: function(options, operation) {
                            if (operation !== "read" && options.models) {
                                return {
                                    models: kendo.stringify(options.models)
                                };
                            }
                            return options;
                        }
                    },
                    batch: true,
                    schema: {
                        model: {
                            id: "ProductID"
                        }
                    }
                }),
                selectedProduct: null,
                hasChanges: false,
                save: function() {
                    this.productsSource.sync();
                    this.set("hasChanges", false);
                },
                remove: function() {
                    if (confirm("Are you sure you want to delete this product?")) {
                        this.productsSource.remove(this.selectedProduct);
                        this.set("selectedProduct", this.productsSource.view()[0]);
                        this.change();
                    }
                },
                showForm: function() {
                   return this.get("selectedProduct") !== null;
                },
                change: function() {
                    this.set("hasChanges", true);
                }
            });

            kendo.bind($("#form-container"), viewModel);
        });
    </script>
    <div class="code-sample">
        <h4 class="code-title">View source code:</h4>
        <pre class="prettyprint">
&lt;div id="form-container"&gt;
    &lt;div class="selector"&gt;
        Select Product: &lt;select data-role="dropdownlist" data-value-field="ProductID" data-text-field="ProductName"
                         data-bind="source: productsSource, value: selectedProduct"&gt;&lt;/select&gt;

        &lt;button data-bind="click: save, enabled: hasChanges"&gt;Publish All Changes&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="form" data-bind="visible: showForm"&gt;
        &lt;ul&gt;
            &lt;li>&lt;label>ID&lt;/label&gt; &lt;span data-bind="text:selectedProduct.ProductID, events: { change: change }"&gt;&lt;/span>&lt;/li>
            &lt;li>&lt;label>Name&lt;/label&gt; &lt;input type="text" class="k-textbox" id="products" data-bind="value: selectedProduct.ProductName, events: { change: change }" /&gt;&lt;/li&gt;
            &lt;li>&lt;label>UnitPrice&lt;/label> &lt;input type="text" data-role="numerictextbox" data-bind="value: selectedProduct.UnitPrice, events: { change: change }" /&gt;&lt;/li&gt;
        &lt;/ul&gt;

        &lt;button data-bind="click: remove">Delete Product&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;
        </pre>
    </div>
    <div class="code-sample">
        <h4 class="code-title">View model source code:</h4>
        <pre class="prettyprint">
var viewModel = kendo.observable({
    productsSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: crudServiceBaseUrl + "/Products",
                dataType: "jsonp"
            },
            update: {
                url: crudServiceBaseUrl + "/Products/Update",
                dataType: "jsonp"
            },
            destroy: {
                url: crudServiceBaseUrl + "/Products/Destroy",
                dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {
                        models: kendo.stringify(options.models)
                    };
                }
                return options;
            }
        },
        batch: true,
        schema: {
            model: {
                id: "ProductID"
            }
        }
    }),
    selectedProduct: null,
    hasChanges: false,
    save: function() {
        this.productsSource.sync();
        this.set("hasChanges", false);
    },
    remove: function() {
        if (confirm("Are you sure you want to delete this product?")) {
            this.productsSource.remove(this.selectedProduct);
            this.set("selectedProduct", this.productsSource.view()[0]);
            this.change();
        }
    },
    showForm: function() {
       return this.get("selectedProduct") !== null;
    },
    change: function() {
        this.set("hasChanges", true);
    }
});

kendo.bind($("#form-container"), viewModel);
</pre>
    </div>

    <style scoped>
        .demo-section label {
            display: inline-block;
            width: 80px;
            ling-height: 30px;
            height: 30px;
        }

        .demo-section li {
          padding-bottom: 5px;
          list-style: none;
        }

        .demo-section {
           width: 400px;
        }
        .demo-section button {
           float: right;
        }
        .product-info {
        	min-height: 160px;
        }
    </style>
</div>

	
			
</body>
</html>
